<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body {
            display: flex;
            flex-direction: column;
            row-gap: 5px
        }

        * {
            color: skyblue;
        }

        div {
            color: cornflowerblue;
        }

        .class-selector1 {
            color: aquamarine;
        }

        .class-selector2 {
            border: 1px solid black;
        }

        #id-selector1 {
            color: chartreuse;
        }

        [style] {
            border: 1px solid black;
        }

        [style="background-color:cornflowerblue;color: black"] {
            border: 5px solid black;
        }

        [style^="fon"] {
            border: 5px solid black;
        }

        [style$="0px"] {
            border: 5px solid black;
        }

        [style*="si"] {
            border: 5px solid black;
        }

        div#intersection-id-selector1.intersection-class-selector1 {
            background-color: aquamarine;
        }

        #intersection-id-selector2, .intersection-class-selector2 {
            background-color: aquamarine;
        }

        .relation-selector1-fu > .relation-selector1-zi {
            color: plum;
        }

        .relation-selector2-gfu .relation-selector2-zi {
            color: plum;
        }

        .relation-selector3-bro1 + div {
            color: black;
            font-size: 40px;
        }

        .relation-selector3-bro1 + p {
            background-color: #cccccc;
        }

        .relation-selector3-bro2 ~ div {
            color: black;
            font-size: 40px;
        }
    </style>
  </head>
  <body>
    <!--1.通配选择器*{}-->
    <h1>通配选择器*{}</h1>
    <h2>通配选择器*{}</h2>
    <p>通配选择器*{}</p>

    <!--2.元素选择器ElementName{}-->
    <div>元素选择器ElementName{}</div>
    <h1>元素选择器ElementName{}</h1>

    <!--3.类选择器ClassName{}-->
    <div class="class-selector1 class-selector2">类选择器ClassName{}</div>

    <!--4.ID选择器IdName{}-->
    <div id="id-selector1">ID选择器IdName{}</div>

    <!--5.属性选择器-->
    <!--①`[属性名]`：根据属性名选中页面中的指定标签-->
    <div style="color: plum">属性选择器：①`[属性名]`：根据属性名选中页面中的指定标签</div>
    <!--③`[属性名="属性值"]`：根据属性名和属性值选中页面中的指定标签-->
    <div style="background-color:cornflowerblue;color: black">
      属性选择器：②`[属性名="属性值"]`：根据属性名和属性值选中页面中的指定标签
    </div>
    <!--③`[属性名^="属性值"]`：根据属性名和指定开头的属性值选中页面中的指定标签-->
    <div style="font-size: 30px">
      属性选择器：③`[属性名^="属性值"]`：根据属性名和指定开头的属性值选中页面中的指定标签
    </div>
    <!--④`[属性名$="属性值"]`：根据属性名和指定结尾的属性值选中页面中的指定标签-->
    <div style="font-size: 30px">
      属性选择器：④`[属性名$="属性值"]`：根据属性名和指定结尾的属性值选中页面中的指定标签
    </div>
    <!--⑤`[属性名*="属性值"]`：根据属性名和包含指定值的属性值选中页面中的指定标签-->
    <div style="font-size: 30px">
      属性选择器：⑤`[属性名*="属性值"]`：根据属性名和包含指定值的属性值选中页面中的指定标签
    </div>

    <!--6.复合选择器：复合选择器中任意选择器存在语法错误将会导致整条规则被忽略-->
    <!--①交集选择器：交集选择器选中页面中同时包含所有选择器的标签，语法格式是`选择器1选择器2...选择器n{}`。**交集选择器中若存在元素选择器则必须以元素选择器为第一位**-->
    <div id="intersection-id-selector1" class="intersection-class-selector1">
      交集选择器：选择器1选择器2...选择器n{}(交集选择器中若存在元素选择器则必须以元素选择器为第一位)
    </div>
    <!--②并集选择器：并集选择器选中页面中包含任意选择器的标签，语法格式是`选择器1,选择器2,...,选择器n{}`-->
    <div id="intersection-id-selector2">
      并集选择器：选择器1,选择器2,...,选择器n{}
    </div>
    <div class="intersection-class-selector2 other-class">
      并集选择器：选择器1,选择器2,...,选择器n{}
    </div>

    <!--7.关系选择器-->
    <!--①子元素选择器：子元素选择器选中页面中父元素包含的所有子元素，语法格式是`父元素 > 子元素{}`。子元素指与父元素相邻一级的元素-->
    <div class="relation-selector1-fu" style="border: 3px solid darkred;padding: 9px">
      <div class="relation-selector1-zi" style="border: 3px solid red;padding: 9px">
        儿子
        <span class="relation-selector1-zi" style="border: 3px solid coral;margin: 3px">儿子的儿子1</span>
        <span class="relation-selector1-zi" style="border: 3px solid coral;margin: 3px">儿子的儿子2</span>
      </div>
    </div>
    <!--②后代元素选择器：后代元素选择器选中页面中祖先元素包含的所有后代元素，语法格式是`祖先元素 后代元素{}`。后代元素指祖先元素包含的所有元素-->
    <div class="relation-selector2-gfu" style="border: 3px solid darkred;padding: 9px">
      <div class="relation-selector2-zi" style="border: 3px solid red;padding: 9px">
        儿子
        <span class="relation-selector2-zi" style="border: 3px solid coral;margin: 3px">儿子的儿子1</span>
        <span class="relation-selector2-zi" style="border: 3px solid coral;margin: 3px">儿子的儿子2</span>
      </div>
    </div>
    <!--③兄弟元素选择器：兄弟元素选择器选中页面中拥有相同父元素的元素，语法格式是`兄元素 + 下一个弟元素{}`和`兄元素 ~ 下一组弟元素`。下一个弟元素指兄元素相邻的一个元素，下一组弟元素指兄元素右部分不连续的所有元素-->
    <!--`前一个 + 下一个{}`-->
    <div style="border: 3px solid darkred;padding: 9px">
      <div style="border: 3px solid red;padding: 9px;margin-top: 4px">bro0</div>
      <div class="relation-selector3-bro1" style="border: 3px solid red;padding: 9px;margin-top: 4px">bro1</div>
      <div style="border: 3px solid red;padding: 9px;margin-top: 4px">bro2</div>
      <div style="border: 3px solid red;padding: 9px;margin-top: 4px">bro3</div>
      <p style="border: 3px solid red;padding: 9px;margin-top: 4px">bro4</p>
      <div style="border: 3px solid red;padding: 9px;margin-top: 4px">bro5</div>
    </div>

    <div style="height: 1px;background-color: black;margin: 10px 0px"></div>

    <!--`前一个 ~ 下一组{}：中间可以断`-->
    <div style="border: 3px solid darkred;padding: 9px">
      <div style="border: 3px solid red;padding: 9px;margin-top: 4px">bro0</div>
      <div class="relation-selector3-bro2" style="border: 3px solid red;padding: 9px;margin-top: 4px">bro1</div>
      <div style="border: 3px solid red;padding: 9px;margin-top: 4px">bro2</div>
      <div style="border: 3px solid red;padding: 9px;margin-top: 4px">bro3</div>
      <p style="border: 3px solid red;padding: 9px;margin-top: 4px">bro4</p>
      <div style="border: 3px solid red;padding: 9px;margin-top: 4px">bro5</div>
    </div>
  </body>
</html>